

<!doctype html>

<html lang="en">

	<head>

		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title>jQuery Scrollify - Power steering for your scroll wheel</title>

		<!--[if lt IE 9]>

		<script src="js/html5shiv.min.js"></script>

		<![endif]-->



		<link rel="stylesheet" href="css/main.css" />



	</head>

	<body>

		<section class="panel home" data-section-name="home">

			<div class="inner">

				<header>

					<h1>SCROLLIFY</h1>

					<p class="tagline">Power steering for your scroll wheel</p>

				</header>

				<p>A jQuery plugin that assists scrolling and smoothly snaps to sections.</p>

				<p>Fully configurable and optimised for touch.</p>



			</div>

		</section>

		<section class="panel overview" data-section-name="overview">

			<div class="inner">

				<h2>Basic Setup</h2>

				<p>Scrollify requires jQuery 1.6+ and an easing library such as jquery.easing.js.</p>

				<pre>

	&lt;! doctype html&gt;

	&lt;html&gt;

		&lt;head&gt;

			&lt;script&gt;

				$(function() {

					$.scrollify({

						section : "section",

					});

				});

			&lt;/script&gt;

		&lt;/head&gt;

		&lt;body&gt;

			&lt;section&gt;&lt;/section&gt;

			&lt;section&gt;&lt;/section&gt;

		&lt;/body&gt;

	&lt;/html&gt;

				</pre>

			</div>

		</section>

		<section class="panel configuration" data-section-name="configuration">

			<div class="inner">

			<h2>Configuration</h2>

				<pre>

	$.scrollify({

		section : "section",

		sectionName : "section-name",

		easing: "easeOutExpo",

		scrollSpeed: 1100,

		offset : 0,

		scrollbars: true,

		before:function() {},

		after:function() {}

	});

				</pre>



			</div>

		</section>

		<section class="panel options" data-section-name="options">

			<div class="inner">

				<h2>Options</h2>

				<dl>

					<dt>section</dt>

					<dd>A selector for the sections.</dd>

					<dt>sectionName</dt>

					<dd>Scrollify lets you define a hash value for each section. This makes it possible to permalink to particular sections. This is set as a data attribute on the sections. The name of the data attribute is defined by 'sectionName'.</dd>

					<dt>easing</dt>

					<dd>Define the easing method.</dd>

					<dt>offset</dt>

					<dd>A distance in pixels to offset each sections position by.</dd>

					<dt>scrollbars</dt>

					<dd>A boolean to define whether scroll bars are visible or not.</dd>

					<dt>before</dt>

					<dd>A callback that is called before a section is scrolled to via the move method. Arguments include the index of the section and an array of all section elements.</dd>

					<dt>after</dt>

					<dd>A callback that is called after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.</dd>

				</dl>

			</div>

		</section>

		<section class="panel methods" data-section-name="methods">

			<div class="inner">

				<h2>Methods</h2>

				<p>The move method can be used to scroll to a particular section. This can take the index of the section, or the name of the section preceded by a hash.</p>

				<pre>

	$.scrollify("move","#name");

				</pre>

			</div>

		</section>





		<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

		<script src="js/jquery.easing.1.3.js"></script>

		<script src="js/scrollify.min.js"></script>

		<script src="js/main.js"></script>

	</body>

</html>